<template>


  <a-modal v-model:visible="visible" fullscreen @close="onClose" :footer="false">
    <template #title>资金管理</template>
        <div class="lg:flex justify-between">
          <div class="ma-content-block p-5 h-full lg:w-1/2">
            <a-card  title="提现" hoverable>
                <ma-form v-model="form"
                         :columns="formColumnsOptions"
                         :options="formOptions"
                         @onSubmit="handlerWithdraw"
                         ref="crudForm" />
            </a-card>


            <a-card class="mt-20">
              <a-statistic class="columns-4" title="累计收入" :value="total" show-group-separator :precision="2" >
              </a-statistic>

              <a-statistic title="预计净收"
                           class="columns-4"
                           :value="total-rechargeMoney" :precision="2"
                           :value-style="{ color: '#0fbf60' }">

                <template #suffix>
                  <icon-arrow-rise v-if="total-rechargeMoney >0" />
                  <icon-arrow-down v-else/>
                </template>
              </a-statistic>
            </a-card>
          </div>


          <div class="ma-content-block p-5 h-full lg:w-1/2 lg:ml-3 mt-3 lg:mt-0">
            <a-card  title="资金流水" >
                <ma-crud :options="crud" :columns="crudColumns" ref="crudRef" >
                  <template #money="{record}">
                    {{record.money_pm_sign}} {{record.money}}
                  </template>
                </ma-crud>

            </a-card>

          </div>
        </div>


      </a-modal>

</template>

<script setup>
import {ref, reactive, computed} from 'vue'
import UserApi from '@/api/user'
import { Message } from '@arco-design/web-vue'
const visible = ref(false)
const crudRef = ref()
const record = ref()
let balance = ref(0)
let rechargeMoney = 0
let money = ref(50)

const open = (row) => {
  record.value = row
  rechargeMoney = row.recharge_money
  visible.value = true
  init()
}

const init = function (){
  crudRef.value.requestData()
  UserApi.getBalance({id:record.value.id}).then(res => {
    balance.value = res.data.balance
    money.value = res.data.balance > 50 ? 50 : res.data.balance
  })
}

let total = ref(0)
const countTotalMoney = function (data){
  let t = 0
  data.forEach(val => {
    if(val.money_pm_sign == "+"){
      t += parseFloat(val.money)
    }
  })
  total.value = t
}

const crudForm = ref({

})
// 表单数据
const form = ref({
  formTitle: '提现',
  balance:balance,
  money:money,
})

const formOptions = ref({
  resetShowBtn:false
})

// 组件的字段设置
const formColumnsOptions = reactive([
  {
    title: '余额',
    formType:'input-number',
    dataIndex: 'balance',
    disabled: true
  },
  {
    title: '提现金额',
    formType:'input-number',
    dataIndex: 'money',
    max:balance
  }
])

function handlerWithdraw(data,done){
  UserApi.withdraw({
    id: record.value.id,
    money:data.money
  }).then(response => {
    if(response.success){
      Message.success('提交成功')
      init()
    }else{
      console.log(response)
      Message.error("提交失败")
    }

  })
}
const emits = defineEmits(['onClose'])
function onClose(){
  emits("onClose")
}

const crud = reactive({
  autoRequest: false,
  api: UserApi.getRecords,
  searchColNumber: 3,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationWidth: 160,
  beforeRequest: (params) => params.id = record.value.id,
  afterRequest: countTotalMoney
})

const crudColumns = reactive([
  { title: '时间', dataIndex: 'take_time' },
  { title: '金额', dataIndex: 'money'},
  { title: '明细', dataIndex: 'money_desc' },
])

defineExpose({ open })
</script>